<template>
    <div class="tabs">
        <div class="blank"></div>
        <ul class="main">
            <li v-for="(item,index) of showArr" @click="activeIndex=index" :class="{activeTitle:activeIndex==index}" :key="index">
                <h3>{{item.title}}</h3>
                <div class="value">
                    <p v-if="pageType!=='wind-city'">{{item.value}}<sup style="font-size:1.5rem;margin-left:.5rem;">{{item.unit}}</sup></p>
                    <p v-else>{{item.value}}<sub style="font-size:1.5rem;margin-left:.5rem;">{{item.unit}}</sub></p>
                </div>
                <p class="station">{{item.station}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{
        pageType(newval){
            this.init()
        }
    },
    data(){
        return{
            activeIndex:0,
            datasArr:[
                [
                    {title:'1h最高温度',value:'16',unit:'℃',station:'平阳区域自动站'},
                    {title:'1h最低温度',value:'9',unit:'℃',station:'平阳区域自动站'},
                    {title:'日最高温度',value:'16',unit:'℃',station:'平阳区域自动站'},
                    {title:'日最低温度',value:'9',unit:'℃',station:'平阳区域自动站'},
                    {title:'日平均最高',value:'16',unit:'℃',station:'平阳区域自动站'},
                    {title:'日平均最低',value:'9',unit:'℃',station:'平阳区域自动站'},
                ],
                [
                    {title:'1h累计降雨量',value:'16',unit:'mm',station:'平阳区域自动站'},
                    {title:'3h累计降雨量',value:'19',unit:'mm',station:'平阳区域自动站'},
                    {title:'6h累计降雨量',value:'20',unit:'mm',station:'平阳区域自动站'},
                    {title:'12h累计降雨量',value:'24',unit:'mm',station:'平阳区域自动站'},
                    {title:'24h累计降雨量',value:'26',unit:'mm',station:'平阳区域自动站'},
                    {title:'48h累计降雨量',value:'48',unit:'mm',station:'平阳区域自动站'},
                    {title:'72h累计降雨量',value:'60',unit:'mm',station:'平阳区域自动站'},
                ],
                [
                    {title:'2分钟风速',value:'1.2',unit:'m/s',station:'平阳区域自动站'},
                    {title:'10分钟风速',value:'0.9',unit:'m/s',station:'平阳区域自动站'},
                    {title:'1小时极大风',value:'1.2',unit:'m/s',station:'平阳区域自动站'},
                    {title:'24小时极大风',value:'0.9',unit:'m/s',station:'平阳区域自动站'},
                    {title:'日最大风',value:'1.2',unit:'m/s',station:'平阳区域自动站'},
                    {title:'瞬时风',value:'0.9',unit:'m/s',station:'平阳区域自动站'},            
                ],
            ],
            showArr:[]
        }
    },
    methods:{
        init(){
            if(this.pageType=='tem-city'||this.pageType=='tem-county'){
                this.showArr = this.datasArr[0]
            }else if(this.pageType=='rain-city'||this.pageType=='rain-county'){
                this.showArr = this.datasArr[1]
            }else if(this.pageType=='wind-city'||this.pageType=='wind-county'){
                this.showArr = this.datasArr[2]
            }
        }
    },
    created(){
        this.init()
    }
}
</script>

<style lang="scss" scoped>
    .tabs{
        width:100%;
        height:100%;
        .blank{
            width:100%;
            height:6%;
        }
        .main{
            width:100%;
            height:94%;
            background-color: #040E31;
            display:flex;
            flex-direction: column;
            li{
                flex:1;
                display:flex;
                flex-direction: column;
                text-align:center;
                cursor: pointer;
                &:nth-child(odd){
                    color:#FEAC66;
                }
                &:nth-child(even){
                    color:#00FEB7;
                }
                h3{
                    color:#89D5EE;
                    height:2rem;
                    width:100%;
                    line-height:2rem;
                    letter-spacing: .2rem;
                    font-size:1.1rem;
                    text-align:center;
                    box-sizing: border-box;
                    border:.1rem solid rgba(48, 138, 199, 0.5);
                    box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
                }
                .value{
                    flex:1;
                    display:flex;
                    font-size:3rem;
                    align-items:center;
                    p{
                        width:100%;
                        text-align:center;
                    }
                }
                .station{
                    height:2rem;
                    line-height:1rem;
                }
            }
            .activeTitle{
                border:.1rem solid #987B87;
                box-shadow: 0rem 0rem .8rem .2rem rgb(112, 88, 88) inset;
            }
        }
    }
</style>